<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <title>管理中心</title>
		<meta http-equiv="Pragma" CONTENT="no-cache">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="renderer" content="webkit">
		<%include("/common/include.html"){}%>
		<link rel="stylesheet" type="text/css" href="${cxt!}/sb/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="${cxt!}/sb/css/center.css">
   </head>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <style>
		.panel-title{
			 font-size:12px;
			 height:20px;
			 font-weight:lighter;
			 line-height:20px
		}
		.tabs li a.tabs-inner{
			border-width:0 0 1px 0;
		}
		.tabs li.tabs-selected a.tabs-inner{
			 border-bottom: 2px solid red;
			 background-color:#F8F8F8;
		}
		.col-md-3{
		width:16%;
		}
		.col-lg-9{
		width:100%;
		}
	</style> 
<body style="height: 100%; margin: 0;">
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">注册登记</p>	
							<p class="big">未归档  ${zcdj!} 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">转移登记</p>	
							<p class="big">未归档  ${zydj! } 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">变更登记</p>	
							<p class="big">未归档  ${bgdj! } 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">注销登记</p>	
							<p class="big">未归档  ${zxdj! } 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">补换号牌</p>	
							<p class="big">未归档  ${bhhp!} 个</p>
		    			</div>
					</div>
		    	</div>
		    	<div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">补换证件</p>	
							<p class="big">未归档  ${bhzj!} 个</p>
		    			</div>
					</div>
		    	</div>
		    	<!-- <div class="col-md-3 col-sm-6 col-xs-12" style="padding: 10px;cursor:pointer;">
		    		<div class="row retangle" style="background: #00349a;">
		    			<div class="col-lg-9 col-md-8 col-sm-10 col-xs-10" style="text-align: center;">
		    				<p class="small">当前日期</p>	
							<p class="big" id="currentDate"></p>
		    			</div>
					</div>
		    	</div>
				<input  id="zdMonth_datebox" name="bussdate" value='${date()}' class="easyui-datebox theme-textbox-radius" 
					style="height: 20px; width: 20px; text-align: center;z-index: 111111111111111111111;"/> -->
					
		  	</div>
			<div id="container" style="height: 85%;width:100%;margin-left:-65px;"></div>
<script type="text/javascript">
	
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop',
			'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft',
			'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ];
	app.configParameters = {
		rotate : {
			min : -90,
			max : 90
		},
		align : {
			options : {
				left : 'left',
				center : 'center',
				right : 'right'
			}
		},
		verticalAlign : {
			options : {
				top : 'top',
				middle : 'middle',
				bottom : 'bottom'
			}
		},
		position : {
			options : echarts.util.reduce(posList, function(map, pos) {
				map[pos] = pos;
				return map;
			}, {})
		},
		distance : {
			min : 0,
			max : 100
		}
	};

	app.config = {
		rotate : 90,
		align : 'left',
		verticalAlign : 'middle',
		position : 'insideBottom',
		distance : 15,
		onChange : function() {
			var labelOption = {
				normal : {
					rotate : app.config.rotate,
					align : app.config.align,
					verticalAlign : app.config.verticalAlign,
					position : app.config.position,
					distance : app.config.distance
				}
			};
			myChart.setOption({
				series : [ {
					label : labelOption
				}, {
					label : labelOption
				}, {
					label : labelOption
				}, {
					label : labelOption
				} ]
			});
		}
	};

	var labelOption = {
		normal : {
			show : false,
			position : app.config.position,
			distance : app.config.distance,
			align : app.config.align,
			verticalAlign : app.config.verticalAlign,
			rotate : app.config.rotate,
			formatter : '{c}  {name|{a}}',
			fontSize : 8,
			rich : {
				name : {
					textBorderColor : '#fff'
				}
			}
		}
	};
	
	option = {
		    title : {
		        text: '               ${businessdate}年当前机构各月业务总量统计(单位:个)'
		        //subtext: '纯属虚构'
		    },
		    color : [ '#3398DB'],
		    tooltip : {
		        trigger: 'axis',
				axisPointer : {
					type : 'shadow'
				}
		    },
		    legend: {
		        data:['当月业务总量']
		    },
		    toolbox: {
		        show : true,
		        orient : 'vertical',
				left : 'right',
				top : 'center',
		        feature : {
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    xAxis : [
		        {
		            type : 'category',
		            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		        {
		            name:'当月业务总量',
		            type:'bar',
		            data:${arr !},
		            markPoint : {
		                data : [
		                    {type : 'max', name: '最大值'},
		                    {type : 'min', name: '最小值'}
		                ]
		            },
		            markLine : {
		                data : [
		                    {type : 'average', name: '平均值'}
		                ]
		            }
		        }
		    ]
		};
	
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}
</script>

</body>
</html>
